<template>
	<view class="record-list-page">
		<!-- 用户信息区域 -->
		<view class="user-info">
			<image class="user-avatar" :src="userInfo.customerAvatar"></image>
			<text class="user-name">{{userInfo.customerName}}</text>
		</view>

		<!-- 记录列表 -->
		<view class="record-item" v-for="(item, index) in recordList" :key="index" @click="handleDetail(item)">
			<view class="record-header">
				<uni-icons class="icon1" :type="marketingMethods[item.way]" color="#ffdc07" size="18"></uni-icons>
				<text class="record-type">{{ item.textWay }}</text>
			</view>
			<view class="record-time">时间：{{ $formatTime(item.ctime) }}</view>

			<view class="record-desc">
				{{item.description}}
			</view>
		</view>

		<!-- 空状态 -->
		<view class="empty-state" v-if="recordList.length === 0">
			<u-icon name="list" size="120" color="#ccc" class="empty-icon"></u-icon>
			<text class="empty-text">暂无相关数据</text>
		</view>

		<!-- 加载状态 -->
		<u-loadmore :status="loadStatus" :loading-text="loadText" class="loadmore"></u-loadmore>

		<!-- 新增记录按钮 -->
		<button class="add-record-btn" @click="addRecord">
			<!-- <uni-icons type="plus" color="#fff" size="18"></uni-icons> -->
			<view class="btn-text">
				<text>新增</text>
				<text>记录</text>
			</view>
		</button>
	</view>
</template>

<script>
	import {
		selectKmhProgress
	} from '@/common/api/renwu.js'
	export default {
		data() {
			return {
				recordList: [],

				// 分页参数
				pageNum: 1, // 当前页码
				pageSize: 10, // 每页条数
				total: 0, // 总条数
				// 状态控制
				isLoading: false, // 加载中锁
				isFirstLoading: true, // 首次加载状态
				loadStatus: 'loadmore', // 加载状态（loadmore/loading/noMore/error）
				loadText: '上拉加载更多',
				task_id: '', //总任务id
				step_id: null, //阶段id
				customerId: '', //客户id
				userInfo: {},
				// 图标
				marketingMethods: {
					1: 'compose', // 文字记录
					2: 'home', // 上门拜访
					3: 'weixin', // 发微信
					4: 'phone', // 打电话
					5: 'scan', // 二维码预约
					6: 'chatboxes', // 发短信
					7: 'navigate' // 网点面谈
				},
			};
		},
		onLoad(options) {
			let that = this
			this.step_id = options.step_id
			this.customerId = options.customer_id
			this.task_id = options.task_id
			const eventChannel = this.getOpenerEventChannel();
			// 监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据
			eventChannel.on('acceptDataFromOpenerPage', function(data) {
				console.log(data, '-------')
				that.userInfo = data
			})
		},
		onShow() {
			this.initData()
		},
		methods: {
			handleDetail(item) {
				uni.navigateTo({
					url: '/homeNav/wdrw/rw_detail?id=' + item.id,
				})
			},
			addRecord() {
				uni.navigateTo({
					url: `/homeNav/wdrw/rw_update?task_id=${this.task_id}&step_id=${this.step_id}&customer_id=${this.customerId}`
				})
			},
			// 初始化数据（重置分页）
			initData() {
				this.loadStatus = 'loading';
				this.loadText = '加载中...';
				this.isLoading = false;
				this.recordList = [];
				this.pageNum = 1
				this.fetchData();
			},
			async fetchData() {
				if (this.isLoading) return;
				this.isLoading = true;
				this.loadStatus = 'loading';
				this.loadText = '加载中...';
				try {
					let param = {
						customerId: this.customerId,
						pageNum: this.pageNum,
						pageSize: this.pageSize,
					}
					let res = await selectKmhProgress(param)
					this.isLoading = false;
					this.total = res.data.total;
					this.recordList = [...this.recordList, ...res.data.records];
					if (this.recordList.length >= this.total) {
						this.loadStatus = 'noMore';
						this.loadText = '已加载全部数据';
					} else {
						this.loadStatus = 'loadmore';
						this.loadText = '上拉加载更多';
						this.pageNum++; // 页码自增
					}

				} catch (error) {
					console.error('加载失败：', error);
					this.isLoading = false;
					this.loadStatus = 'error';
					this.loadText = '加载失败，点击重试';
				} finally {
					this.loading = false;
				}
			},

		},
		// 页面触底时触发（UniApp 自带生命周期）
		onReachBottom() {
			console.log('cccc')
			// 触底加载更多（排除首次加载、正在加载、无更多数据的情况）
			if (!this.isLoading && this.loadStatus === 'loadmore') {
				console.log('22')
				this.fetchData();
			}
		},
	};
</script>

<style scoped>
	.record-list-page {
		width: 100%;
		min-height: 100vh;
		background-color: #f5f5f5;
	}

	/* 导航栏样式 */
	.navbar {
		height: 88rpx;
		/* 44px → 88rpx */
		background-color: #e60012;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 32rpx;
		/* 16px → 32rpx */
	}

	.nav-title {
		color: #fff;
		font-size: 32rpx;
		/* 16px → 32rpx */
	}

	/* 用户信息样式 */
	.user-info {
		display: flex;
		align-items: center;
		padding: 32rpx;
		/* 16px → 32rpx */
		background-color: #fff;
		border-bottom: 2rpx solid #eee;
		/* 1px → 2rpx */
	}

	.user-avatar {
		width: 80rpx;
		/* 40px → 80rpx */
		height: 80rpx;
		/* 40px → 80rpx */
		border-radius: 50%;
		margin-right: 24rpx;
		/* 12px → 24rpx */
	}

	.user-name {
		font-size: 32rpx;
		/* 16px → 32rpx */
		color: #333;
	}

	/* 记录项样式 */
	.record-item {
		background-color: #fff;
		padding: 32rpx;
		/* 16px → 32rpx */
		margin-bottom: 20rpx;
		/* 10px → 20rpx */
		border-bottom: 2rpx solid #eee;
		/* 1px → 2rpx */
	}

	.record-header {
		display: flex;
		align-items: center;
		margin-bottom: 16rpx;
		/* 8px → 16rpx */
	}

	.record-type {
		font-size: 28rpx;
		/* 14px → 28rpx */
		color: #333;
		margin: 0 24rpx;
		/* 12px → 24rpx */
	}

	.record-time {
		font-size: 24rpx;
		/* 12px → 24rpx */
		color: #999;
		margin-bottom: 16rpx;
	}

	.record-desc {
		width: 100%;
		padding: 16rpx;
		/* 8px → 16rpx */
		border: 2rpx solid #eee;
		/* 1px → 2rpx */
		border-radius: 8rpx;
		/* 4px → 8rpx */
		font-size: 28rpx;
		/* 14px → 28rpx */
		box-sizing: border-box;
	}

	/* 新增记录按钮 */
	.add-record-btn {
		position: fixed;
		right: 40rpx;
		/* 20px → 40rpx */
		bottom: 15%;
		/* 20px → 40rpx */
		background-color: #e60012;
		color: #fff;
		border-radius: 50%;
		width: 112rpx;
		/* 56px → 112rpx */
		height: 112rpx;
		/* 56px → 112rpx */
		display: flex;
		align-items: center;
		justify-content: center;
		flex-flow: wrap row;
		box-shadow: 0 4rpx 16rpx rgba(230, 0, 18, 0.3);
		/* 0 2px 8px → 0 4rpx 16rpx */

	}

	.btn-text {
		display: flex;
		flex-direction: column;
		/* 文字垂直排列（两行） */
		align-items: center;
		font-size: 24rpx;
		/* 缩小文字尺寸 */
		line-height: 1.2;
		/* 调整行高 */
	}

	.btn-text text {
		display: block;
		/* 每个字单独占一行 */
	}

	.icon1 {
		background-color: #e60012;
		border-radius: 50%;
		padding: 8rpx;
	}

	.loadmore {
		padding-bottom: 24rpx;
	}
</style>